<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="用户评价" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<view class="sticky">
			<text class="mr100" @tap="navgetTo('pages/my/root_detail',param.linesId,'')">线路信息</text><text class="active" @tap="navgetTo('pages/my/evaluate',param.linesId,'')">用户评价</text>
		</view>
		<view class="uni-loadmore tc" v-if="List.length==0">暂无评论</view>
		<scroll-view scroll-y="true" scroll-x="false" :style="{height:scrollH+'px'}" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
		<view class="uni-padding-wrap pt30 pb130" v-for="item in List">
			<view class="evaluate-item p100 b-dash">
				<view class="uni-flex">
					<view>{{item.recommendUserName}}</view>
					<view>{{item.createDate}}</view>
				</view>
				<view class="is-flex line-h70">
					评分&nbsp;&nbsp;<uni-rate :readonly="true" max="5" v-model="item.recommendStar" />
				</view>
				<view class="is-flex">
					<view>评论</view>
					<view class="">{{item.recommendContent}}</view>
				</view>
			</view>
		</view>
		<!-- 加载提示 -->
		 <view v-if="isLoading" class="tc mt100 mb100">{{loadMoreText}}</view>
		</scroll-view>
		<view class="fixed-bottom-wrap ">
			<view class="schdule-card uni-flex">
				<view class="flex-item sign uni-primary-bg" @tap="navgetTo('pages/my/edit_root',param.linesId,'')">
					<text>编辑线路</text>
				</view>
				<view class="flex-item sign uni-success-bg" @tap="navgetTo('pages/schdule/create_schdule',param.linesId,'')">
					<text>发起组队</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	// import cityData from '@/common/util/city.js'
	// import uPicker from '@/components/u-picker/u-picker.vue'
	export default {
		components: {
			// uPicker
		},
		data() {
			return {
				starValue:2,
				maxStar:5,
				scrollH:0,
				isRefreshing:false,
				isLoading:false,
				loadMoreText:"加载中...",
				List:[],
				param: {
					page: 1, //当前页
					limit: 10, //每页显示记录数
					linesId:'',
				},
			}
		},
		computed: {
			
		},
		onReady() {
			// 获取可滚动区域的高度：视口高度 - tabbar切换卡高度就是剩余的内容可滚动的。
			//如果你使用取消了原生导航栏，记着把你自定义导航栏的高度也减掉哦
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			})
		},
		watch: {

		},
		onShow() {
			// let userLoginFlag = storageUtil.getStorageData("isLogin");
			// if (userLoginFlag) {
			// 	this.getOrders();
			// }
		},
		onLoad(option) {
			if(option.param){
				let params = JSON.parse(decodeURIComponent(option.param));
				this.param.linesId = params.data;
				if(this.param.linesId != ""){
					this.getPageList('onPullDownRefresh');
				}
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			onRefresh() {  // 下拉刷新
				this.isRefreshing = true;
				this.param.page = 1;
				this.getPageList('onPullDownRefresh');
			},
			onLoadMore() {  // 上拉加载
				if (this.isLoading) return;
				this.isLoading = true;
				this.param.page = (this.param.page + 1);
				if (this.param.page > this.param.PageCount) {
					this.isLoading = true;
					this.loadMoreText = "--到底啦--"
					return;
				}
				this.getPageList('onReachBottom');
			},
			// 获取分页列表
			getPageList(type) {
				let _this = this;
				let requestData = {
					params: { 
						page: _this.param.page, 
						size: _this.param.limit, 
						linesId:_this.param.linesId
					}
				}
				api.linesRecommendList(requestData).then(res => {
					if (res.code === 0) {
						if (res.data.length > 0) {
							let pagelist = res.data;
							_this.param.PageCount = Math.ceil(res.data.total / _this.param.limit);
							if (type == "onReachBottom") {
								_this.List = _this.List.concat(pagelist)
							} else {
								_this.List = pagelist;
							}
						}else{
							_this.List = [];
						}
					} else {}
				_this.isRefreshing = false;
				_this.loadMoreText = "";
				}).catch(function(){
					_this.isRefreshing = false;
					_this.loadMoreText = "";
				})
			
			},
			// 页面跳转
			navgetTo(page, param, type) {
				// let userLoginFlag = storageUtil.getStorageData("isLogin");
			
				// if (!userLoginFlag || userLoginFlag == '') {
				// 	this.popShowHandle();
				// 	return;
				// }
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
	}
	
	.bottom-wrap{
		position: relative;
		top: -60rpx;
	}
	
	.is-flex{
		display: flex;
		align-items: center;
	}
	
	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}

	.sticky {
		height: 85rpx;
		line-height: 85rpx;
		background-color: #ffffff;
		width: 100%;
		color: #888;
		position: sticky;
		top: -1rpx;
		left: 0;
		right: 0;
		z-index: 999;
		text-align: center;
	}

	.sticky text {
		color: $uni-text-color-light-blue;
		font-weight: bold;
		padding: 10rpx 15rpx;
	}
	.sticky text.active{
		color: $uni-text-color-blue;
		border-bottom: 2px solid $uni-text-color-blue;
	}
	.xc-desc{
		text{
			margin-bottom: 30rpx;
			display: block;
		}
	}
	.xc-info{
		text{
			margin-left: 15rpx;
		}
		.map-text{
			color: $uni-text-color-blue;
			font-size: 16rpx;
			padding: 5rpx 10rpx;
			border: 1px solid $uni-text-color-blue;
			border-radius: 10rpx;
		}
	}
	.pb130{
		padding-bottom: calc( 130rpx + max(env(safe-area-inset-bottom),20px));
	}
	.share-reward{
		.color-black{
			display: block;
			margin-bottom: 20rpx;
		}
		.is-flex{
			align-items: flex-start;
		}
		.color-gray{
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}
	.fixed-bottom-wrap {
		position: fixed;
		z-index: 111;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		width: 100%;
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
	}
	.schdule-card{
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: 60rpx;
		border-top: 1px solid #f8f8f8;
		padding-bottom: max(env(safe-area-inset-bottom),20px);
		.flex-item{
			padding-top: 10rpx;
			width: 30%;
			text-align: center;
			line-height: 40rpx;
		}
		.flex-item:last-child{
			width: 70%;
			padding-top: 0;
		}
		text{
			display: block;
		}
		.sign{
			height: 100%;
			color: $uni-text-color-white;
			font-size: 32rpx;
			line-height: 100%;
			text{
				line-height: 100rpx;
			}
		}
	}
	
</style>